<script setup>
import { ref } from "vue";
import { toHref } from "@/utils/to_path";
import {
    StickyNote2Outlined,
    EventNoteRound,
    ShoppingBagOutlined,
} from "@vicons/material";
import FileCard from "@/components/card/FileCard.vue";

// 轮播图
const banners = [
    {
        id: 1,
        src: "https://cdn3-banquan.ituchong.com/weili/image/l/1831308539676721159.jpeg",
        to: "http://www.baidu.com",
        is_router: false,
        new_tab: true,
    },
    {
        id: 2,
        src: "https://cdn6-banquan.ituchong.com/weili/image/l/1620270124612059141.jpeg",
        to: "/note",
        is_router: true,
    },
    {
        id: 3,
        src: "https://cdn3-banquan.ituchong.com/weili/image/l/812543851813273779.jpeg",
        to: "https://www.naiveui.com/",
        is_router: false,
        new_tab: false,
    },
    {
        id: 4,
        src: "https://cdn3-banquan.ituchong.com/weili/image/l/903056078503149583.jpeg",
        to: "/shop",
        is_router: true,
    },
];

// 功能区按钮
const actionBtns = [
    {
        key: "add-note",
        label: "新增笔记",
        icon: StickyNote2Outlined,
        theme: "success",
        to: "/note",
    },
    {
        key: "add-thing",
        label: "新增小记",
        icon: EventNoteRound,
        theme: "info",
        to: "/thing",
    },
    {
        key: "mode-shop",
        label: "模板中心",
        icon: ShoppingBagOutlined,
        theme: "error",
        to: "/shop",
    },
];

// 最近记录中的文件
const files = ref([
    {
        id: 117,
        type: 1,
        title: "Vue3 知识点整理",
        time: "2023-10-25 08:54:00",
    },
    {
        id: 203,
        type: 2,
        title: "2023-01-19 买菜清单",
        time: "2023-01-23 15:33:07",
    },
    {
        id: 307,
        type: 1,
        title: "MySQL 知识点",
        time: "2002-05-13 07:33:07",
    },
    {
        id: 234,
        type: 1,
        title: "2022年春节购买清单",
        time: "2022-02-13 13:33:17",
    },
    {
        id: 756,
        type: 2,
        title: "Vue3 Vite 项目中的 CkEditor5 使用",
        time: "2023-07-24 08:23:37",
    },
    {
        id: 2314,
        type: 2,
        title: "2023 年过节礼品清单",
        time: "2023-03-10 09:23:57",
    },
]);

/**
 *  前往文件的页面（后续接着完成）
 * @param {Number} type 文件类型（1：笔记，2：小记）
 * @param {Number} file_id 文件编号
 */
const toFilePage = (type = 1, file_id) => {
    if (type === 1) {
        toHref("/note");
    } else {
        toHref("/thing");
    }
};
</script>

<template>
    <n-space
        vertical
        style="padding: 25px;"
        :size="20"
    >
        <!-- 轮播图 -->
        <n-carousel
            autoplay
            show-arrow
            dot-type="line"
        >
            <n-a
                v-for="b in banners"
                :key="b.id"
                @click="toHref(b.to, b.is_router, b.new_tab)"
            >
                <img
                    class="carousel-img"
                    :src="b.src"
                >
            </n-a>
        </n-carousel>
        <!-- 新建文件，模板中心 -->
        <n-card :bordered="false">
            <n-space>
                <n-button
                    tertiary
                    v-for="b in actionBtns"
                    :key="b.key"
                    :type="b.theme"
                    @click="toHref(b.to)"
                >
                    {{ b.label }}
                    <template #icon>
                        <n-icon :component="b.icon"></n-icon>
                    </template>
                </n-button>
            </n-space>
        </n-card>
        <!-- 最近记录 -->
        <n-card :bordered="false">
            <template #header>
                <h3 style="margin: 0;">最近记录</h3>
            </template>
            <!-- 文件卡片 -->
            <n-space>
                <file-card
                    v-for="f in files"
                    :key="f.id"
                    :title="f.title"
                    :type="f.type"
                    :id="f.id"
                    :time="f.time"
                    @click="toFilePage(f.type)"
                />
            </n-space>
        </n-card>
    </n-space>
</template>


<style scoped>
.n-carousel {
    height: 140px;
    border-radius: 8px;
}

.carousel-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
</style>